<div class="page-wrap-challenge">
<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
<app-header-static></app-header-static>
<div class="dash-container">
  <div class="challenge-flex" [class.center]="!authService.isAuth">
    <div class="challenge-content">
      <div class="mid-container">
        <div class="challenge-container">
          <section class="ev-sm-container  ev-view" *ngIf="isChallengeHost && !isApprovedByAdmin">
            <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-banner">
                <div class="row margin-bottom-cancel">
                    <div class="col s12 m12 l12">Thank you for successfully creating a challenge on EvalAI.
                        The challenge is ready to accept submissions from host the team. Please note that the submissions from the host team won't be visible on leaderboard until you mark them as baseline submission.
                        In order for the challenge to accept submissions from the public, it requires approval from the EvalAI Team. Please reach out to us at 
                        <a href="mailto:team@cloudcv.org" class="blue-text">team@cloudcv.org</a> for challenge approval.
                    </div>
                </div>
            </div>
          </section>
          <div class="challenge-card">
            <div class="top-card-container ev-card-panel">
              <div class="row card-img-row">
                <div class="col-lg-2 col-md-3 col-sm-12">
                  <div class="image-container">
                    <img [src]="challenge['image']" width="100%" />
                  </div>
                </div>
                <div class="col-lg-7 col-md-6">
                  <div class="card-content">
                    <h4 class="challenge-title fw-light">
                      {{ challenge['title'] }}
                    </h4>
                    <span class="title-line fw-light fs-16" *ngIf="challenge.creator.team_url != ''"
                      ><strong class="text-light-black"> Organized by:</strong
                      ><a class="orange-text" href="{{ challenge['creator']['team_url'] }}" target="_blank">
                        {{ challenge['creator']['team_name'] }}
                      </a>
                    </span>
                    <span class="title-line fw-light fs-16" *ngIf="challenge.creator.team_url == ''"
                      ><strong class="text-light-black">Organized by:</strong>
                      {{ challenge['creator']['team_name'] }}
                    </span>
                    <br />
                    <!-- Start date -->
                    <span class="fs-16 fw-light">
                      <strong class="text-light-black">Starts on:</strong>
                      {{ challenge['start_date'] | date: 'medium' }} {{ challenge['start_zone'] }}
                    </span>
                    <br />
                    <!-- End date -->
                    <span class="fs-16 fw-light">
                      <strong class="text-light-black">Ends on:</strong>
                      {{ challenge['end_date'] | date: 'medium' }} {{ challenge['end_zone'] }}
                    </span>
                    <br />
                  </div>
                </div>
                <div class="col-lg-3 col-md-3">
                  <button
                    class="stars btn-waves-effect grad-btn grad-btn-dark ev-btn-dark fw-light fs-14"
                    type="submit"
                    [class.is-clickable]="isLoggedIn"
                    (click)="starToggle(challenge['id'])"
                  >
                    <i class="fa fa-star star"></i> {{ challenge.data }}&nbsp;&nbsp;{{ stars['count'] }}
                  </button>
                </div>
              </div>
              <div class="row rm-row-bot card-tab-row">
                <div class="col-sm-12">
                  <ul class="inline-list rm-gut">
                    <li>
                      <a
                        [class.selected]="localRouter.url.endsWith('overview')"
                        [routerLink]="['./overview']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-info"></i> Overview</a
                      >
                    </li>
                    <li>
                      <a
                        [class.selected]="localRouter.url.endsWith('evaluation')"
                        [routerLink]="['./evaluation']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-bar-chart-o"></i>
                        Evaluation</a
                      >
                    </li>
                    <li>
                      <a
                        [class.selected]="localRouter.url.endsWith('phases')"
                        [routerLink]="['./phases']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-level-up"></i> Phases</a
                      >
                    </li>
                    <li *ngIf="!isParticipated && !isPast">
                      <a
                        [class.selected]="localRouter.url.endsWith('participate')"
                        [routerLink]="['./participate']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-free-code-camp"></i>
                        Participate</a
                      >
                    </li>
                    <li *ngIf="isParticipated && phases.length > 0">
                      <a
                        [class.selected]="localRouter.url.endsWith('submit')"
                        [routerLink]="['./submit']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-upload"></i> Submit</a
                      >
                    </li>
                    <li *ngIf="isParticipated && phases.length > 0">
                      <a
                        [class.selected]="localRouter.url.endsWith('my-submissions')"
                        [routerLink]="['./my-submissions']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-eye"></i> My Submissions</a
                      >
                    </li>
                    <li *ngIf="isChallengeHost">
                      <a
                        [class.selected]="localRouter.url.endsWith('view-all-submissions')"
                        [routerLink]="['./view-all-submissions']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-list"></i> All Submissions</a
                      >
                    </li>
                    <li *ngIf="phases.length > 0">
                      <a
                        [class.selected]="localRouter.url.includes('leaderboard')"
                        [routerLink]="['./leaderboard']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-line-chart"></i> Leaderboard</a
                      >
                    </li>
                    <li *ngIf="isChallengeHost">
                      <a
                        [class.selected]="localRouter.url.endsWith('analytics')"
                        [routerLink]="['./analytics']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-bar-chart"></i> Analytics
                      </a>
                    </li>
                    <li *ngIf="isForumEnabled && (forumURL || isChallengeHost)">
                      <a
                        [class.selected]="localRouter.url.endsWith('discuss')"
                        [routerLink]="['./discuss']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-comments"></i> Discuss
                      </a>
                    </li>
                    <li *ngIf="isChallengeHost">
                      <a
                        [class.selected]="localRouter.url.endsWith('settings')"
                        [routerLink]="['./settings']"
                        class="text-light-black fw-light fs-15"
                      >
                        <i class="fa fa-cogs"></i> Settings
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
  </div>
</div>
</div>
<app-footer *ngIf="!authService.isAuth"></app-footer>
